<template>
	<view>
		<!-- 评论 -->
		<view class="evalution">
			<view class="eva-list" :class="{Skeleton:!loaded}" v-for="(item, index) in data" :key="index">
				<view  
					class="eva-item"
				>
					<image :src="item.dtsUser.avatar" mode="aspectFill"></image>
					<view class="eva-right">
						<text>{{item.dtsUser.nickname}}</text>
						<text>{{item.dtsGoodsProduct.specifications}}</text>
						<view class="zan-box">
							<text>{{item.addTime.slice(0,10)}}</text>
							
						</view>
						<text class="content">{{item.content}}</text>
						<view class="image-container">
							<!-- 使用 v - for 循环展示图片 -->
							<image 
								v-for="(url, imgIndex) in item.picUrls" 
								:key="imgIndex" 
								:src="url" 
								@click="openImageModal(url)"
							></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 图片放大 -->
		<view class="image-modal" v-if="showImageModal">
		  <view class="modal-mask" @click="hideImageModal"></view>
		  <view class="modal-content">
		    <image :src="currentLargeImageUrl" mode="aspectFit"></image>
		  </view>
		</view>
	</view>
</template>

<script>
	import share from '@/components/share';
	import {getComment} from '@/config/api/goodsDetail.js';
	
	export default {
		components: {
			share
		},
		data() {
			return {
				loaded: false,
				currentEpd: 1,
				data: {
					guessList: [{},{},{},{}] 
				},
				shareList: [],
				showImageModal: false,
				currentLargeImageUrl: '',
			};
		},
		async onLoad(options){
			let detailData = await this.$api.json('detailData');
			let shareList = await this.$api.json('shareList');
			this.loaded = true;
			this.data = detailData;
			this.shareList = shareList;
			let id = options.id;
			
			try {	// 商品评论
				const res = await getComment({id})
				if (res && res.data && typeof res.data === 'object' && 'code' in res.data && res.data.code === 200) {
					this.data = res.data.data
					console.log(JSON.stringify(this.data[0], null, 2));
					
					this.data.forEach(item => {
					  // 解析 picUrls 字符串为数组
					  try {
					    // 尝试使用 JSON.parse 解析
					    item.picUrls = JSON.parse(item.picUrls);
					  } catch (e) {
					    // 如果 JSON 解析失败，使用正则表达式处理
					    item.picUrls = item.picUrls
					      .replace(/[\[\]"]/g, '')
					      .split(/[,\s]+/)
					      .filter(url => url.trim() !== ''); // 过滤空字符串
					  }
					});
					console.log(JSON.stringify(this.data[0].picUrls, null, 2));
				} else {
					console.error('请求失败:', res?.data?.msg || '未知错误');
				}
			} catch (error) {
				console.error('接口异常:', error)
				this.$message.error('数据加载失败')
			}
		},
		methods:{
			imageOnLoad(key,index){
				this.$set(this.data[key][index], 'loaded', 'loaded');
			},
			openImageModal(url) {
				this.currentLargeImageUrl = url;
				this.showImageModal = true;
			},
			hideImageModal() {
				this.showImageModal = false;
			}
		},
		//处理遮罩层物理返回键
		onBackPress(){
			if(this.$refs.share.show){
				this.$refs.share.toggleMask();
				return true;
			}
		},
		
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}

	.carousel {
		height: 200px;
		.image-wrapper{
			display: flex;
			justify-content: center;
			align-content: center;
			width: 100%;
			height: 100%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.scroll-view-wrapper{
		display:flex;
		align-items:center;
		height: 90upx;
		padding: 20upx 0 20upx 40upx;
		background: #fff;
	}
	.episode-panel {
		white-space: nowrap;
		width: 100%;
		view {
			display: inline-block;
			margin-right: 30upx;
			width: 56upx;
			font-size: $font-lg;
			color: $font-color-base;
			&.current{
				color: #07a7a7;
			}
		}
	}

	.info {
		display: flex;
		align-items: center;
		padding: 10upx 40upx;
		background: #fff;

		.title {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-lg + 4upx;
			color: $font-color-dark;

			text:last-child {
				font-size: $font-sm;
				color: $font-color-light;
				margin-top: 4upx;
				&.Skeleton{
					width:220upx;
				}
			}
		} 
		.yticon {
			font-size: 44upx;
			color: $font-color-base;
			margin: 0 10upx 0 30upx;
		}
	}

	.actions {
		padding: 10upx 28upx;
		background: #fff;

		.yticon {
			font-size: 46upx;
			color: $font-color-base;
			padding: 10upx 12upx;
			&.active{
				color: #ff4443;
			}
			&:nth-child(2) {
				font-size: 50upx;
			}
		}
	}

	.section-tit {
		font-size: $font-base+2upx;
		color: $font-color-dark;
		margin-bottom: 30upx;
		text-align:center;
	}

	.guess {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30upx 40upx 10upx;
		margin-top: 16upx;
		background: #fff;
	}

	.guess-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.guess-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		min-width: 40%;
		margin-right: 26upx;
		padding-bottom: 40upx;
	
		&:nth-child(2n) {
			margin-right: 0;
		}
	
		image {
			width: 100%;
			height: 200upx;
			border-radius: 10upx;
		}
	
		text {
			font-size: $font-sm;
			color: $font-color-light;
			&.Skeleton{
				width: 180upx;
				&.title{
					width: 140upx;
				}
			}
			&.title{
				font-size: $font-base+2upx;
				color: $font-color-dark;
				margin-top:16upx;
				margin-bottom: 8upx;
			}
		}
	}
	.evalution{
		display:flex;
		flex-direction:column;
		background: #F2F2F2;
		margin-top: 16upx;
		
	}

	.eva-item{
		display:flex;
		padding: 20upx 40upx;
		background-color: #fff;
		margin-bottom: 10px;
		image{
			width: 60upx;
			height: 60upx;
			border-radius: 50px;
			flex-shrink: 0;
			margin-right: 24upx;
		}
	}
	.eva-right{
		display:flex;
		flex-direction:column;
		flex: 1;
		font-size: $font-sm + 2upx;
		color: $font-color-light;
		position:relative;
		.zan-box{
			display:flex;
			align-items:base-line;
			position:absolute;
			top: 10upx;
			right: 10upx;
			.yticon{
				margin-left: 8upx; 
			}
		}
		.content{
			font-size: $font-base;
			color: #333;
			padding-top:20upx;
			margin-bottom: 5px;
		}
	}
	.image-container {
	    display: flex;
	    flex-wrap: wrap;
	}
	.image-container image {
	    width: 100px; /* 示例宽度，按需调整 */
	    height: 100px; /* 示例高度，按需调整 */
		border-radius: 0px;
	    margin-right: 10px; /* 示例间距，按需调整 */
	    margin-bottom: 10px; /* 示例间距，按需调整 */
	}
	
	.image-modal {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	}
	.modal-mask {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	.modal-content {
	  max-width: 90%;
	  max-height: 90%;
	}
</style>
